<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>Bootstrap 实例</title>

	<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M"
	 crossorigin="anonymous">

	<style>
		[class*="col"] p {
			background-color: #eee;
			text-align: center
		}

		table {
			width: 100%;
		}

		table.reference tr:nth-child(odd) {
			background-color: #f6f4f0;
		}

		table.reference th {
			color: #fff;
			background-color: #555;
			border: 1px solid #555;
			font-size: 12px;
			padding: 3px;
			vertical-align: top;
			text-align: left;
		}

		table.reference td {
			min-width: 24px;
			border: 1px solid #d4d4d4;
			padding: 5px;
			padding-top: 7px;
			padding-bottom: 7px;
			vertical-align: top;
		}
	</style>
</head>

<body>
	<section class="container">
		<div class="card my-4">
			<div class="card-header">
				<h5 class="text-primary">网格系统</h5>
				<p>Bootstrap 提供了一套响应式、移动设备优先的流式网格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多 12 列。</p>
			</div>
			<div class="card-body">
				<p>Bootstrap 4 的网格系统是响应式的，列会根据屏幕大小自动重新排列。</p>
				<table class="reference mb-2">
					<thead>
						<tr>
							<th></th>
							<th class="text-center">
								超小设备
								<br>
								<small>&lt;576px</small>
							</th>
							<th class="text-center">
								平板
								<br>
								<small>≥576px</small>
							</th>
							<th class="text-center">
								桌面显示器
								<br>
								<small>≥768px</small>
							</th>
							<th class="text-center">
								大桌面显示器
								<br>
								<small>≥992px</small>
							</th>
							<th class="text-center">
								超大桌面显示器
								<br>
								<small>≥1200px</small>
							</th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<th class="text-nowrap" scope="row">容器最大宽度</th>
							<td>None (auto)</td>
							<td>540px</td>
							<td>720px</td>
							<td>960px</td>
							<td>1140px</td>
						</tr>
						<tr>
							<th class="text-nowrap" scope="row">类前缀</th>
							<td>
								<code>.col-</code>
							</td>
							<td>
								<code>.col-sm-</code>
							</td>
							<td>
								<code>.col-md-</code>
							</td>
							<td>
								<code>.col-lg-</code>
							</td>
							<td>
								<code>.col-xl-</code>
							</td>
						</tr>
						<tr>
							<th class="text-nowrap" scope="row">列数量和</th>
							<td colspan="5">12</td>
						</tr>
						<tr>
							<th class="text-nowrap" scope="row">间隙宽度</th>
							<td colspan="5">30px （一个列的左右两边分别 15px）</td>
						</tr>
						<tr>
							<th class="text-nowrap" scope="row">可嵌套</th>
							<td colspan="5">Yes</td>
						</tr>
						<tr>
							<th class="text-nowrap" scope="row">列排序</th>
							<td colspan="5">Yes</td>
						</tr>
					</tbody>
				</table>
				<p>我们也可以根据自己的需要，定义列数：</p>
				<div class="row">
					<div class="col">
						<p>1</p>
					</div>
					<div class="col">
						<p>1</p>
					</div>
					<div class="col">
						<p>1</p>
					</div>
					<div class="col">
						<p>1</p>
					</div>
					<div class="col">
						<p>1</p>
					</div>
					<div class="col">
						<p>1</p>
					</div>
					<div class="col">
						<p>1</p>
					</div>
					<div class="col">
						<p>1</p>
					</div>
					<div class="col">
						<p>1</p>
					</div>
					<div class="col">
						<p>1</p>
					</div>
					<div class="col">
						<p>1</p>
					</div>
					<div class="col">
						<p>1</p>
					</div>
					<div class="col">
						<p>1</p>
					</div>
				</div>
				<div class="row">
					<div class="col">
						<p>2</p>
					</div>
					<div class="col">
						<p>2</p>
					</div>
					<div class="col">
						<p>2</p>
					</div>
					<div class="col">
						<p>2</p>
					</div>
					<div class="col">
						<p>2</p>
					</div>
					<div class="col">
						<p>2</p>
					</div>
					<div class="col">
						<p>2</p>
					</div>
				</div>
				<div class="row">
					<div class="col">
						<p>3</p>
					</div>
					<div class="col">
						<p>3</p>
					</div>
					<div class="col">
						<p>3</p>
					</div>
					<div class="col">
						<p>3</p>
					</div>
				</div>
				<div class="row">
					<div class="col">
						<p>4</p>
					</div>
					<div class="col">
						<p>4</p>
					</div>
					<div class="col">
						<p>4</p>
					</div>
				</div>
				<div class="row">
					<div class="col">
						<p>6</p>
					</div>
					<div class="col">
						<p>6</p>
					</div>
				</div>
				<div class="row">
					<div class="col-4">
						<p>4</p>
					</div>
					<div class="col-8">
						<p>8</p>
					</div>
				</div>

			</div>
		</div>
	</section>
</body>

</html>